<template>
  <div class="recommend">
      <h1>相关攻略</h1>
      <div class="recommend-content" v-for="item in recData" :key="item.id" @click="turnToDetails(item.id)">
          <div v-if="item.images.length" class="rec-img">
              <img :src="img" alt="" v-for="(img, index) in item.images" :key="index" >
          </div>

          <div class="rec-word">
              {{item.title}}
                <span>{{item.created_at | filter}} 阅读{{item.watch}}</span>
          </div>
      </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: '',
  data () {
    return {
      recData: []
    }
  },
  filters: {
    // 过滤日期格式
    filter (value) {
      return moment(value).format('YYYY-MM-DD hh:mm')
    }
  },
  mounted () {
    this.$http.get('/posts/recommend', {
      params: { id: this.$route.query.id }
    }).then(res => {
      const { data } = res.data
      console.log(data)
      this.recData = data
    })
  },
  methods: {
    turnToDetails (id) {
      this.$router.push({
        path: '/post/details',
        query: {
          id: id
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.recommend{
    margin-top: 30px;
    h1{
        font-size: 20px;
        position: relative;
        &::after{
            position: absolute;
            top: 40px;
            content: '';
            display: block;
            height: 1px;
            width: 260px;
            background-color:rgb(199, 199, 199);
        }
    }
    .recommend-content{
        margin-top: 20px;
        font-size: 15px;
        width: 100%;
        height: 115px;
        display: flex;
        border-bottom: 1px solid rgb(199, 199, 199);
        padding-bottom: 10px;
        cursor: pointer;
        h2{
            font-size: 15px;
        }
        .rec-img{
            width: 45%;
            img{
                display: block;
                width: 90%;
                height: 100%;
                object-fit: cover;
            }
        }
        .rec-word{
            flex: 1;
            height: 100%;
            z-index: 1;
            right: 0;
            position: relative;
            span{
                color: gray;
                bottom: 5px;
                position: absolute;
                width: 100%;
                font-size: 10px;
                left: 0;
            }
        }
    }
}
</style>
